<template>
	<view class="ff-tabbar-item" :style="[tabbarItemStyle]" @click="clickEvent">
		<slot name="default">
			<template v-if="ffTabbar.getValue() === name">
				<view v-if="$ff.props.active.type === 'icon'">
					<view class="ff-tabbar-item-box">
						<ff-icon :name="$ff.props.active.icon" size="37rpx" :color="tabbarItemStyle.color"></ff-icon>
					</view>
				</view>
				<view v-else-if="$ff.props.active.type === 'image'">
					<view class="ff-tabbar-item-box">
						<image class="ff-tabbar-item-image" mode="aspectFill" :src="$ff.props.active.src" :alt="$ff.props.active.text">
						</image>
					</view>
				</view>
				<view>{{$ff.props.active.text}}</view>
			</template>
			<template v-else>
				<view v-if="$ff.props.inactive.type === 'icon'">
					<view class="ff-tabbar-item-box">
						<ff-icon :name="$ff.props.inactive.icon" size="37rpx" :color="tabbarItemStyle.color"></ff-icon>
					</view>
				</view>
				<view v-else-if="$ff.props.inactive.type === 'image'">
					<view class="ff-tabbar-item-box">
						<image class="ff-tabbar-item-image" mode="aspectFill" :src="$ff.props.inactive.src" :alt="$ff.props.inactive.text">
						</image>
					</view>
				</view>
				<view>{{$ff.props.inactive.text}}</view>
			</template>
		</slot>
	</view>
</template>

<script>
	export default {
		name: "ff-tabbar-item",
		inheritAttrs: true,
		options: {
			styleIsolation: 'isolated',
			virtualHost: true
		},
		inject: ['ffTabbar'],
		emits: ['before-leave'],
		props: {
			name: {
				type: String,
				require: true,
			},
			type: {
				type: String,
				default: undefined,
			},
			value: {
				default: undefined,
			},
			isDefault: {
				type: Boolean,
				default: undefined,
			},
			inactive: {
				type: Object,
				default: undefined,
			},
			active: {
				type: Object,
				default: undefined,
			},
			sort: {
				type: Number,
				default: undefined,
			},
		},
		data() {
			return {
				// #ifdef VUE2
				ffTabbar: this.ffTabbar,
				// #endif
			}
		},
		provide() {
			return {

			}
		},
		computed: {
			tabbarItemStyle() {
				let style = {}
				if (this.ffTabbar.getValue() === this.$ff.props.name) {
					if (this.$ff.props.active) {
						style['color'] = this.$ff.props.active.color ? this.$ff.props.active.color : '#2FCA6E'
						if (this.$ff.props.active.type === 'image') {
							style['fontSize'] = '25rpx'
						} else if (this.$ff.props.active.type === 'icon') {
							style['fontSize'] = '25rpx'
						} else if (this.$ff.props.active.type === 'text') {
							style['fontSize'] = '30rpx'
						}
					}
				} else {
					if (this.$ff.props.inactive) {
						style['color'] = this.$ff.props.inactive.color ? this.$ff.props.inactive.color : '#5D6268'
						if (this.$ff.props.inactive.type === 'image') {
							style['fontSize'] = '25rpx'
						} else if (this.$ff.props.inactive.type === 'icon') {
							style['fontSize'] = '25rpx'
						} else if (this.$ff.props.inactive.type === 'text') {
							style['fontSize'] = '30rpx'
						}
					}
				}
				// #ifndef MP-WEIXIN
					if (this.$ff.props.type === 'openWechatVideoNumberUserProfile') {
						style['display'] = 'none'
					}
				// #endif
				style['paddingTop'] = '23rpx'
				style['paddingBottom'] = '23rpx'
				return style
			},
		},
		mounted() {
			if (this.ffTabbar) {
				this.ffTabbar.addChildren(this)
			}
		},
		// #ifdef VUE2
		destroyed() {
			if (this.ffTabbar) {
				this.ffTabbar.removeChildren(this)
			}
		},
		// #endif
		// #ifdef VUE3
		unmounted() {
			if (this.ffTabbar) {
				this.ffTabbar.removeChildren(this)
			}
		},
		// #endif
		methods: {
			clickEvent() {
				if (this.$ff.props.type === 'ffWindow') {
					if (this.ffTabbar) {
						this.ffTabbar.setValue(this.$ff.props.name)
					}
				} else if (this.$ff.props.type === 'callPhone') {
					uni.makePhoneCall({
						phoneNumber: '114',
						success: () => {},
						fail: () => {},
					})
				} else if (this.$ff.props.type === 'openWechatVideoNumberUserProfile') {
					// #ifdef MP-WEIXIN
					wx.openChannelsUserProfile({
						finderUserName: this.$ff.props.value.finderUserName,
						fail: function(e) {
							console.log(e)
							if (e.errno && e.errno != 5) {
								uni.showToast({
									title: "打开视频号主页失败, 请联系管理员 错误代码 " + e.errno,
									icon: "none"
								})
							}
						}
					})
					// #endif
				} else if (this.$ff.props.type === 'openWechatVideoNumberVideo') {
					// #ifdef MP-WEIXIN	
					wx.openChannelsActivity({
						finderUserName: this.$ff.props.value.finderUserName,
						feedId: this.$ff.props.value.feedId,
						fail: function(e) {
							console.log(e)
							if (e.errno && e.errno != 5) {
								uni.showToast({
									title: "打开视频号视频失败, 请联系管理员 错误代码 " + e.errno,
									icon: "none"
								})
							}
						}
					})
					// #endif
				} else if (this.$ff.props.type === 'openWechatVideoNumberActivity') {
					// #ifdef MP-WEIXIN	
					wx.openChannelsEvent({
						finderUserName: this.$ff.props.value.finderUserName,
						eventId: this.$ff.props.value.eventId,
						fail: function(e) {
							console.log(e)
							if (e.errno && e.errno != 5) {
								uni.showToast({
									title: "打开视频号活动页失败, 请联系管理员 错误代码 " + e.errno,
									icon: "none"
								})
							}
						}
					})
					// #endif
				}
			},
		},
	}
</script>

<style scoped>
	@import "../../librarys/css/components.css";
	
	.ff-tabbar-item {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: column;
	}

	.ff-tabbar-item-image {
		width: 40rpx;
		height: 40rpx;
	}

	.ff-tabbar-item-box {
		width: 37rpx;
		height: 37rpx;
		margin-bottom: 9rpx;
	}
</style>